import React from 'react';
import ImageLazy from '../commons/ImageLazy';
import NavLink from '../commons/NavLink';
import { connect } from 'react-redux';
import {hashHistory } from 'react-router'
import {order_detail,apply_refund} from '../../actions';
// import {get_add_shopcar,pro_order_list} from '../../actions';

let mydefault = React.createClass({
  componentDidUpdate:function(){
    this.props.refundMessage = "买多了买错了";
  },
  componentDidMount:function(){
    let {dispatch} = this.props;
    dispatch(order_detail({union_sn:this.props.unionSN}));

    let _this = this;
    _this.props.refundMessage = "买多了买错了";
    $('.cause li').tap(function(){
      $('.cause li').find('em').removeClass('active')
      $(this).find('em').addClass('active');
      _this.props.refundMessage = $(this).find('span').text();
    })

    $("textarea[name='textarea_a']").focus(function(){
      let this_h = $('.other').height();
      $('.other').css({'position':'fixed','height':'100%','padding':'0 .55rem'});
      $('.other').find('em').css('display','inline')

    })
    $("textarea[name='textarea_a']").blur(function(){
      $('.other').css({'position':'static','height':'','padding':'0'})
      $('.other').find('em').css('display','none')
    });

    $('.applyRefund .bot a').click(function(){
      _this.props.userMessage = emp_test($("textarea[name='textarea_a']").val())?$("textarea[name='textarea_a']").val():"无";
      let a = confirm('您确定要退款吗');
      let query = "order_id=" + _this.props.orderId + "&user_id=" + _this.props.userId + '&user_message=' + _this.props.userMessage + '&refund_message=' + _this.props.refundMessage;
      console.log('/mall/order/refund_apply?'+query);
      if(_this.props.orderState != 3){
        alert('抱歉 此订单状态已改变 不可重复提交')
        hashHistory.push('/userView/user')
        return false;
      }
      if(a){
        apply_refund(query,_this.props.itemPrice);
      }else{
        return false;
      }
    })
  },
  render:function(){
    let _this = this;
    return(
      <div className="applyRefund">
        {
          this.props.orderDetailItem.map(function(item,index){
            if(item.unionSN == _this.props.unionSN){
              _this.props.itemPrice = item.itemPrice;
              _this.props.orderId = item.orderId;
              _this.props.orderState = item.orderState;
              return(
                <div className="top border_b1">
                  医院：{item.hospitalName}<br/>
                  医生：{item.doctorName}{item.doctorTitle}<br/>
                  订单号：{item.orderSN}
                  <div className="price">
                    实付预约金：¥ {item.itemPrice}
                  </div>
                </div>
              )
            }
          })
        }
        <div className="cause">
          <div className="tit border_b1">退款原因</div>
          <ul>
            <li className="border_b1">
              <span>买多了买错了</span><em className="checks active"><var></var></em>
            </li>
            <li className="border_b1">
              <span>预约时间不合适，没时间消费</span><em className="checks"><var></var></em>
            </li>
            <li className="border_b1">
              <span>更换了医生</span><em className="checks"><var></var></em>
            </li>
            <li className="border_b1">
              <span>对医院|医生不太满意</span><em className="checks"><var></var></em>
            </li>
            <li className="border_b1">
              <span>医生服务与美人谷描述不符</span><em className="checks"><var></var></em>
            </li>
          </ul>
          <div className="other clearfix">
            <span>更多不爽，必须吐槽</span>
            <textarea name="textarea_a" className="box" id=""></textarea>
            <em>完成</em>
          </div>
        </div>

        <div className="bot border_t1">
          {/* <NavLink to="/user/applyRefund/status">申请退款</NavLink> */}
          <a href="javascript:void(0)">申请退款</a>
        </div>
      </div>
    )
  }
})

function emp_test(obj){
    if(obj.replace(/^\s+|\s+$/g,'').length == 0){
        return false;
    }else{
        return true;
    }
}

let mapStateToProps = (state,own)=>{
  return{
    userId:state.user.userId,
    unionSN:own.params.unionSN,
    orderDetailItem:state.user.order_detail || [],
    userMessage:"",
    refundMessage:"",
    orderId:"",
    orderState:"3",
    itemPrice:""
  }
}

export default connect(mapStateToProps)(mydefault)
